<template>
    <div class="userdetail">
        <div>
            <div class="user_img" >
                <img :src="userInfo.user_img" alt="" v-if="userInfo.user_img">
                <img src="../../assets/default.jpeg" alt="" v-else>
            </div>
            <div class="user_edit">
                <div>
                    <p>
                        <span>0</span>
                        <span class="user_text">粉丝</span>
                    </p>
                    <p>
                        <span>54</span>
                        <span class="user_text">关注</span>
                    </p>
                    <p>
                        <span>0</span>
                        <span class="user_text">获赞</span>
                    </p>
                </div>
                <div @click="$router.push('/edit')">
                    <div class="user_editBtn">编辑资料</div>
                </div>
            </div>
        </div>
        <div>
            <h2>{{userInfo.name}}</h2>
            <p v-if="userInfo.user_desc">{{userInfo.user_desc}}</p>
            <p v-else>这个人很神秘，什么都没写</p>
        </div>
    </div>
</template>
<script>
export default {
    props:['userInfo'],
    data(){
        return{}
    }
}
</script>
<style lang="scss">
.userdetail{
    background-color: #fff;
    padding: 0 12px;
    div:nth-child(1){
        display: flex;
    .user_img{
        margin-right: 20px;
        img{
            height: 85px;
            width: 85px;
            border-radius: 50%;
        }

    }
    .user_edit{
        flex: 1;
        div:nth-child(1){
            display: flex;
            p{
                span{
                    color:#000;
                }
                .user_text{
                    color: #aaa;
                }
                flex: 1;
                display: flex;
                align-items: center;
                flex-direction: column;
                font-size: 13px;
            }
            p:nth-child(1),p:nth-child(2){
                border-right: 1px solid #ccc;
            }
        }
        div:nth-child(2){
            .user_editBtn{
                border: 1px solid #fb7a9f;
                padding: 3px ;
                display: flex ;
                align-items:  center;
                justify-content: center;
                color: #fb7a9f;
                border-radius: 3px;
            }
        }
    }
    }
    div:nth-child(2){
        h2{
            margin: 2.778vw 0 0.833vw 0;
            padding: 0;
        }
        p{
            padding: 0;
            margin:2.778vw 0;
            color: #999;
        }
    }
}
</style>